<template>
	<view class="search-list">
		<view class="search-box" :style="{position:isFixed?'fixed':'static'}">
			<!-- :class="{'is-fixed':isFixed}" -->
			<view class="input">
				<icon type="search" size="16" color="#bbb"></icon>
				<input type="text" confirm-type="search" :value="searchValue" @input="inputHandler" @confirm="inputSearch"></input>
				<icon v-if="searchValue" type="clear" size="16" color="#bbb" @click="searchValue = ''"></icon>
			</view>
			<view class="cancel" @click="clear" v-if="!show">取消</view>
		</view>
		<block v-if="show">
			<view class="filter-box" :style="{position:isFixed?'fixed':'static'}">
				<!-- :class="{'is-fixed1':isFixed}" -->
				<view v-for="(item,index) in menuList" :key="index" :class="{active:activeIndex === index}" @click="activeIndex = index">{{item}}</view>
			</view>
			<view class="goods" :style="{marginTop:isFixed?'220rpx':'0rpx'}">
				<!-- :style="{'margin-top':isFixed?'220rpx':'0rpx'}" -->
				<view class="goods-item" v-for="item in searchList" :key="item.goods_id" @click="toDetail(item.goods_id)">
					<view class="left">
						<image :src="item.goods_small_logo"></image>
					</view>
					<view class="right">
						<view class="goods-name">{{item.goods_name}}</view>
						<view class="goods-price">￥<text>{{item.goods_price}}</text>.00</view>
					</view>
				</view>
			</view>
			<view class="btm-line" v-if="isFinish">
				-- 没有更多了 --
			</view>
		</block>
		<view class="search-history" v-else>
			<view class="clear-history" :class="{'is-top1':isFixed}">
				<view>历史搜索</view>
				<icon v-if="historys.length > 0" type="clear" size="16" color="#bbb" @click="clearHistory"></icon>
			</view>
			<view class="historys"><text v-for="(item,index) in historys" :key="index" @click="hotSearch(item)">{{item}}</text></view>
		</view>
	</view>
</template>

<script>
	const HISTORY_LIST = 'history_list'
	export default {
		data() {
			return {
				searchValue: '',
				activeIndex: 1,
				menuList: ['综合', '销量', '价格'],
				searchList: [],
				// 当前页
				pagenum: 1,
				// 是否完成
				isFinish: false,
				// 是否正在请求
				isRequesting: false,
				// 搜索历史
				historys: uni.getStorageSync(HISTORY_LIST) || [],
				// 显示隐藏
				show: true,
				// 头部是否固定
				isFixed: false,
			}
		},
		methods: {
			async search() {
				if (this.isFinish || this.isRequesting) {
					return;
				}
				//请求开始前,设置请求中
				this.isRequesting = true
				const res = await this.$request({
					url: '/api/public/v1/goods/search',
					data: {
						query: this.searchValue,
						pagenum: this.pagenum,
						pagesize: 10,
					},
					showLoading: false
				})
				this.searchList.push(...res.goods)
				// 请求结束后,设置不是请求中
				this.isRequesting = false
				if (res.total <= this.searchList.length) {
					this.isFinish = true
				}
			},
			// 跳转到详情页
			toDetail(id) {
				uni.navigateTo({
					url: "../detail/detail?id=" + id
				})
			},
			// 确认搜索
			inputSearch() {
				if (this.searchValue) {
					this.clearData()
					// 复制一份
					let _historys = [...this.historys]
					// 将搜索栏的值插入到_historys 头部
					_historys.unshift(this.searchValue)
					// 数组去重
					_historys = [...new Set(_historys)]
					// 存在页面
					this.historys = _historys.slice(0, 10)
					// 存到storage
					uni.setStorageSync(HISTORY_LIST, _historys)
					this.search()

				}
			},
			// 搜索栏清空
			clear() {
				if (this.searchList.length != 0) {
					// this.searchValue = ''
					this.show = true
				} else {
					uni.navigateBack(1)
				}
			},

			inputHandler(event) {
				// 获取输入框的值
				this.searchValue = event.detail.value.trim();
				// this.show = false;

			},
			// 清空历史记录
			clearHistory() {
				uni.showModal({
					title: '提示',
					content: '你确定要清空历史记录吗?',
					success: res => {
						if (res.confirm) {
							console.log(111)
							// 页面清空
							this.historys = []
							// 缓存清空
							uni.removeStorageSync(HISTORY_LIST)
						}
					}
				})
			},
			// 数据清空
			clearData() {
				this.pagenum = 1
				this.isFinish = false
				this.searchList = []
				this.show = true;
			},
			// 热门搜索
			hotSearch(value) {
				this.searchValue = value;
				this.inputSearch()
			}
		},
		// 滚动事件监听
		onPageScroll(scrolltop) {
			if(scrolltop.scrollTop > 0) {
				if (!this.isFixed) {
					this.isFixed = true
				}
			}else {
				this.isFixed = false
			}
			
		},
		onLoad(options) {
			if (options.show) {
				this.show = false
				this.isFinish = true
				return
			}
			if (options.cat_name) {
				this.searchValue = options.cat_name.trim()
			}
			this.search()
		},
		// 上拉刷新
		onReachBottom() {
			if (!this.isFinish && !this.isRequesting) {
				// 下一页数据
				this.pagenum++;
				this.search();
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			// 清空列表,加载第一页数据
			// this.isFixed = false
			this.clearData()
			// console.log('顶部固定状态',this.isFixed)
			this.search()
			//停止动画
			uni.stopPullDownRefresh()
		}
	}
</script>

<style lang="less">
	.search-list {
		// position: relative;


		.search-box {
			display: flex;
			box-sizing: border-box;
			height: 120rpx;
			padding: 30rpx 16rpx;
			background-color: #eee;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;

			// &.is-fixed {
			// 	position: fixed;
			// 	top: 0;
			// 	left: 0;
			// 	right: 0;
			// }

			// 搜索框
			.input {
				flex: 1;
				display: flex;
				align-items: center;
				padding: 0 30rpx;
				margin-right: 20rpx;
				border-radius: 4rpx;
				height: 60rpx;
				background-color: #fff;

				input {
					flex: 1;
					margin-right: 20rpx;
				}

				icon {
					margin-right: 20rpx;
				}
			}

			.cancel {
				height: 58rpx;
				line-height: 58rpx;
				width: 158rpx;
				border: 1rpx solid #bfbfbf;
				border-radius: 8rpx;
				text-align: center;
			}
		}

		// 过滤栏
		.filter-box {
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid #dddddd;
			height: 100rpx;
			position: fixed;
			top: 120rpx;
			left: 0;
			right: 0;
			background-color: #fff;
			// &.is-fixed1 {
			// 	position: fixed;
			// 	top: 120rpx;
			// 	left: 0;
			// 	right: 0;
			// 	background-color: #fff;
			// }

			view {
				flex: 1;
				text-align: center;
			}

			.active {
				color: #eb4956;
			}
		}

		// 商品列表
		.goods {
			// font-size: 15rpx;
			padding: 0 20rpx;
			margin-top: 220rpx;

			.goods-item {
				display: flex;
				padding: 30rpx 0;
				height: 260rpx;
				box-sizing: border-box;
				border-bottom: 1rpx solid #dddddd;

				.left {
					margin-right: 30rpx;

					image {
						width: 200rpx;
						height: 200rpx;
					}
				}

				.right {
					flex: 1;
					display: flex;
					flex-direction: column;
					flex-wrap: wrap;
					justify-content: space-between;

					.goods-name {
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						word-break: break-all;
					}

					.goods-price {
						color: #eb4956;

						text {
							font-size: 45rpx;
						}
					}
				}
			}

		}

		// 底部提示
		.btm-line {
			margin: 30rpx 0;
			margin-bottom: 50rpx;
			text-align: center;
			color: #ddd;
		}

		// 历史搜素
		.search-history {
			padding: 0 16rpx;

			.clear-history {
				display: flex;
				justify-content: space-between;
				// margin: 30rpx 0;
				padding-top: 30rpx;

				&.is-top1 {
					margin-top: 120rpx;
				}
			}

			.historys {
				display: flex;
				flex-wrap: wrap;
				margin-top: 30rpx;

				text {
					padding: 20rpx 25rpx;
					margin-right: 30rpx;
					margin-bottom: 20rpx;
					background-color: #dddddd;
				}
			}
		}
	}
</style>
